import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {Map, List, OrderedSet} from 'immutable';
import Image from 'components/Image'
import {dataSourceQL} from '../ql';

import {Table, Row, Col} from 'antd';
import calculator from 'util/calculator';
import {currentQL} from '../ql';


@Relax
export default class OrderItems extends Component {
    static defaultProps = {
        detail: Map(),
        activityRecordInfo: List(),
        dataSource: dataSourceQL,
        current: currentQL
    }


    render() {
        const {detail, dataSource, current} = this.props;

        return (
            <div>
                <div className="buy-list">
                    <Table bordered
                           pagination={false}
                           columns={this.renderColumns()}
                           dataSource={dataSource}/>
                </div>
                <Row className="order-info-former">
                    <Col span={10} className="bdr t-grayer">
                        {
                            detail.get('score') == '0' ? null : <p>返积分{detail.get('score')}点</p>
                        }
                    </Col>
                    <Col span={9} offset={15}>
                        <Row className="pushb">
                            <Col span={12}><label className="lh20">商品总价：</label></Col>
                            <Col span={12}><div className="t-right">&yen;{(detail.get('totalInitItemFee') || 0).toFixed(2)}</div></Col>
                        </Row>
                        <Row className="pushb">
                            <Col span={12}><label className="lh20">店铺优惠：</label></Col>
                            <Col span={12}><div className="t-right">-&yen;{(detail.get('totalPreAmount') || 0).toFixed(2)}</div></Col>
                        </Row>
                        <Row className="pushb">
                            <Col span={12}>使用积分：</Col>
                            <Col span={12}><div className="t-right">-&yen;{(detail.get('offsetMoney') || 0).toFixed(2)}</div></Col>
                        </Row>
                        <Row className="pushb">
                            <Col span={12}><label className="lh20">发票费用：</label></Col>
                            <Col span={12}><div className="t-right">&yen;{(detail.get('invoiceFee') || 0).toFixed(2)}</div></Col>
                        </Row>
                        <Row className="pushb ">
                            <Col span={12}><label className="lh20">配送费用：</label></Col>
                            <Col span={12}><div className="t-right">&yen;{(detail.get('logisticsFee') || 0).toFixed(2)}</div></Col>
                        </Row>
                        <Row className="pushb font-16">
                            <Col span={12}>{(current == 0 || current == 6) ? '应付金额' : '实付金额'}：</Col>
                            <Col span={12}><div className="t-right t-price">&yen;{(detail.get('totalTradeCash') || 0).toFixed(2)}</div></Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        )
    }

    renderColumns() {
        const {activityRecordInfo} = this.props;
        return [
            {
                title: "商品清单",
                dataIndex: "goodImg",
                width: 280,
                className:"bdr0",
                render: (value, record, index)=>{
                    const pervalue = record.initItemPrice;
                    const initItemPrice = record.salePrice;

                    let priceContent = [<p className="real-price t-red"><span>&yen;{(pervalue || 0).toFixed(2)}</span></p>];
                    if (!!initItemPrice && pervalue != initItemPrice ) {
                        priceContent.push(
                            <p className="price t-grayer">
                                <del>&yen;{(initItemPrice || 0).toFixed(2)}</del>
                            </p>
                        )
                    }

                    return {
                        children: (
                            <div className="order-goods-item">
                                <Row>
                                    <Col span={18}>
                                        <div className="order-goods-info">
                                            <Image className="ant-table-row-img" width={70} height={70} src={record.picUrl} alt={record.itemName}/>
                                            <p className="good-name" title={record.itemName}>
                                                {
                                                    record.isGift == 1 ? <span className="t-red">[赠品]</span> : null
                                                }
                                                {record.itemName}
                                            </p>
                                            <p className="t-grayer no-warp" title={record.productSpecification}>{record.productSpecification}</p>
                                            <p className="t-grayer">商家编码：{record.articleNo}</p>
                                        </div>
                                    </Col>
                                    <Col span={6}>
                                        <div className="goods-price t-right">
                                            {priceContent}
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        ),
                        props: {
                            colSpan: 2,
                        }
                    }
                }
            },
            {
                title: "单价／数量",
                width: 100,
                className:"ant-table-th-right",
                dataIndex: "price/num",
                render:()=>{
                    return {
                        children:{},
                        props: {
                            colSpan: 0,
                        },
                    }
                }
            },
            {
                title: "购买数量",
                width: 100,
                className: "ant-table-th-center",
                dataIndex: "itemNumber",
                render: (v, record, index)=><span className="font-14">&yen;{(v || 0)}</span>
            },
            {
                title: "单位",
                width: 100,
                className: "ant-table-th-center",
                dataIndex: "unit",
                render: (v, record, index)=><span className="font-14">{(v || "-")}</span>
            },
            {
                title: "销售小计",
                width: 150,
                className: "ant-table-th-center",
                dataIndex: "initItemPriceTotal",
                render: (v, record, index)=>{
                    let initItemPrice = record.initItemPrice || 0;
                    let itemNumber = record.itemNumber || 1;

                    return (
                        <span className="font-14 t-red">&yen;{(initItemPrice * itemNumber).toFixed(2)}</span>
                    )
                }
            },
            {
                title: "成交单价",
                width: 150,
                className: "ant-table-th-center",
                dataIndex: "pervalue",
                render: (v, record, index)=><span className="font-14">&yen;{(v || 0).toFixed(2)}</span>
            }
        ]
    }


    marketUtil(markets) {
        let marketInfo = OrderedSet();
        (markets || List()).forEach(market=>{
            if (market.get('activityType') == 'TIME_LIMITED_DISCOUNT') {
                marketInfo = marketInfo.add('限时折扣');
            } else if (market.get('activityType') == 'FULL_PRIVILEGE') {
                if (market.get('isFreeShipping') == 1) {
                    marketInfo = marketInfo.add('包邮');
                }
                if (market.get('isPresent') == 1) {
                    marketInfo = marketInfo.add('送赠品');
                }
                if (!!market.get('integral')) {
                    marketInfo = marketInfo.add(`送积分`)
                }
                if (!!market.get('privilegeValue')) {
                    marketInfo = marketInfo.add(`减${market.get('privilegeValue')}元`)
                }
            }
        })

        return marketInfo.isEmpty() ? '暂无优惠' : marketInfo.join(',');
    }
}